<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>3D照片墙</title>
    <style>
        @keyframes rotate-frame {
            0% {
                transform: rotateX(-20deg) rotateY(0deg);
            }
            10% {
                transform: rotateX(-20deg) rotateY(36deg);
            }
            20% {
                transform: rotateX(-20deg) rotateY(72deg);
            }
            30% {
                transform: rotateX(-20deg) rotateY(108deg);
            }
            40% {
                transform: rotateX(-20deg) rotateY(144deg);
            }
            50% {
                transform: rotateX(-20deg) rotateY(180deg);
            }
            60% {
                transform: rotateX(-20deg) rotateY(216deg);
            }
            70% {
                transform: rotateX(-20deg) rotateY(252deg);
            }
            80% {
                transform: rotateX(-20deg) rotateY(288deg);
            }
            90% {
                transform: rotateX(-20deg) rotateY(324deg);
            }
            100% {
                transform: rotateX(-20deg) rotateY(360deg);
            }

        }
        body {
            background: #f9f9f9;
        }
        .photo-wrap {
            perspective: 800px;
            /*width: 800px;*/
        }
        .container {
            width: 800px;
            height: 500px;
            margin: 0 auto;
            position: relative;
            transform-style: preserve-3d;
            transform:rotateX(-10deg);
            animation: rotate-frame 10s linear infinite;
        }
        .img {
            width: 200px;
            height: 118px;
            line-height: 118px;
            text-align: center;
            position: absolute;
            top: 160px;
            left: 300px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.9) inset;
            -webkit-box-reflect:below 3px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5));
            background: pink;
            background:-moz-linear-gradient(top, pink, rgba(0, 0, 255, 0.5));
            background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ccccff), to(rgba(174, 221, 129, 0.5)));
            background:-o-linear-gradient(top, pink, rgba(0, 0, 255, 0.5));
            transform: rotateY(0deg);
        }
        .img00 {

        }
        .img01 {
            transform: rotateY(0deg) translateZ(300px);
        }
        .img02 {
            transform: rotateY(40deg) translateZ(300px);
        }
        .img03 {
            transform: rotateY(80deg) translateZ(300px);
        }
        .img04 {
            transform: rotateY(120deg) translateZ(300px);
        }
        .img05 {
            transform: rotateY(160deg) translateZ(300px);
        }
        .img06 {
            transform: rotateY(200deg) translateZ(300px);
        }
        .img07 {
            transform: rotateY(240deg) translateZ(300px);
        }
        .img08 {
            transform: rotateY(280deg) translateZ(300px);
        }
        .img09 {
            transform: rotateY(320deg) translateZ(300px);
        }
    </style>
</head>

<body class="body">
<div class="photo-wrap">  <!-- 舞台 -->
    <div class="container">   <!-- 容器 -->
        <div class="img"><img src="imgs/微信图片_2018050422442014.jpg" height="300" width="450" style="margin-left: -150px"/></div>
        <div class="img img01"><img src="imgs/微信图片_2018050422442015.jpg" height="300" width="450"/></div>
        <div class="img img02"><img src="imgs/微信图片_2018050422442016.jpg" height="300" width="450"/></div>
        <div class="img img03"><img src="imgs/微信图片_201805042302345.jpg" height="300" width="450"/></div>
        <div class="img img04"><img src="imgs/微信图片_201805042244204.jpg" height="300" width="450"/></div>
        <div class="img img05"><img src="imgs/微信图片_201805042244206.jpg" height="300" width="450"/></div>
        <div class="img img06"><img src="imgs/微信图片_2018050422442010.jpg" height="300" width="450"/></div>
        <div class="img img07"><img src="imgs/微信图片_201805042302343.jpg" height="300" width="450"/></div>
        <div class="img img08"><img src="imgs/微信图片_2018050422442012.jpg" height="300" width="450"/></div>
        <div class="img img09"><img src="imgs/微信图片_201805042302341.jpg" height="300" width="450"/></div>
    </div>
</div>
</body>
</html>
